import React, { useEffect, useState } from "react";
import {
  Form,
  Input,
  Button,
  Dialog,
  Checkbox,
  Space,
  DatePicker,
  Toast,
} from "antd-mobile";
import { FormInstance } from "antd-mobile/es/components/form";
import dayjs from "dayjs";
import { CloseCircleFill } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import "./index.css";
import axios from "axios";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [tel, setTel] = useState("");
  const values = form.getFieldsValue();
  const onSubmit = () => {
    setTel(values.a);
    let tel = values.a;
    axios.post("/api/login", { tel: tel }).then((resp) => {
      let { code, msg, token, user } = resp.data;
      if (code == 200) {
        Toast.show({
          content: `登录成功`,
        });
        localStorage.setItem("token", token);
        localStorage.setItem("user", user);
        navigate("/home/home");
      }
    });
  };
  const yzm = () => {
    axios.get("/api/yzm").then((resp) => {
      let { yzm, code } = resp.data;
      if (code == 200) {
        Toast.show({
          content: `获取验证码成功${yzm}`,
        });
      }
    });
  };

  return (
    <div className="login">
 
      <div className="login-bottom">
        <Form
          form={form}
          initialValues={{
            a: "",
          }}
          footer={
            <Button block color="primary" onClick={onSubmit} size="large">
              登录
            </Button>
          }
        >
          <Form.Item name="a" label="手机号" required>
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item name="b" label="验证码" required>
            <Input placeholder="请输入验证码" />
            <button onClick={() => yzm()}>获取验证码</button>
          </Form.Item>
        </Form>
        <div><a onClick={()=>navigate('/sigin')}>还没有注册？</a></div>
      </div>
    </div>
  );
};

export default Index;
